<template>
  <div style="background-color: #fff;position: relative">
    <img id="bg" src="/imgs/bg.png">
    <el-card id="card">
      <div id="title">
        <!--图形-->
        <div id="graphic">
          <div id="triangle"></div>
          <div id="square"></div>
          <div id="circle"></div>
        </div>
        <span id="tText">智慧养老机构服务平台</span>

      </div>

      <!--输入-->
      <el-form style="position: relative;top: 100px;">

        <el-form-item style="padding-bottom: 10px;">
          <el-input style="height: 37px;width: 355px;padding-left: 20px;padding-right: 20px;"
                    v-model="userForm.username"
                    placeholder="请输入用户名（admin）">
            <template #prefix>
              <span class="iconfont icon-user" style="margin-bottom: 3px;"></span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input style="height: 37px;width: 355px;padding-left: 20px;padding-right: 20px;"
                    v-model="userForm.password"
                    show-password
                    placeholder="请输入密码（123）">
            <template #prefix>
              <span class="iconfont icon-password" style="margin-bottom: 1px;"></span>
            </template>
          </el-input>
        </el-form-item>

        <el-row :gutter="15" style="margin-top: 33px;">
          <el-col :span="9">
            <el-checkbox size="large" style="display: inline">记住密码</el-checkbox>
          </el-col>

          <el-col :span="6"></el-col>

          <el-col :span="9">
            <a href="#">
              <el-button type="primary" link style="display: inline;color: #0468FF">忘记密码?</el-button>
            </a>
          </el-col>
        </el-row>

        <el-button @click="login()" type="primary" auto-insert-space style="margin-top: 15px;width: 300px;height: 36px;" color="#0460ff">
          登录
        </el-button>

        <div class="other-login">
          <span style="font-size: 14px;">其他登录方式</span>
          <a href="#">
            <el-button type="primary" link style="margin-left: 30px;color: #0468FF;">扫码登录</el-button>
          </a>
          <span style="color: #d7d7d7;"> | </span>
          <a href="#">
            <el-button type="primary" link style="margin-left: 0;color: #0468FF">手机号登录</el-button>
          </a>
        </div>

      </el-form>


    </el-card>
  </div>
</template>

<script setup>
import {ref} from "vue";
import qs from "qs"
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
const userForm = ref({username: '', password: ''});
const login  = () => {
  let data = qs.stringify(userForm.value)
  console.log("用户登录",data)
  axios.post('http://localhost:8080/v1/employee/login',data).then(response => {
    // console.log(response)
    if (response.data.state==2000){
      ElMessage({
        message: "登录成功",
        type: 'success',
      })
      localStorage.setItem("user",JSON.stringify(response.data.data))
      router.push('/')
    }else{
      ElMessage.error(response.data.msg)
    }
  })
}
</script>


<style scoped>

* {
  text-align: center;
  font-family: 'Microsoft YaHei UI', sans-serif;
  font-weight: 400;
  font-style: normal;
}

#bg {
  width: 1000px;
  position: absolute;
  top: 20px;
  left: 0;
}

#card {
  position: absolute;
  top: 160px;
  right: 115px;
  width: 380px;
  height: 470px;
}

#title {
  position: relative;
  top: 40px;
}

#tText {
  position: absolute;
  left: 68px;
  top: 2px;
  font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 26px;
  color: #000000;
}

#graphic {
  width: 42px;
  height: 55px;
  overflow: hidden;
  position: relative;
  left: 10px;
  top: -5px;
}

#triangle {
  width: 30px;
  height: 18px;
  background-color: rgb(4, 104, 255);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  margin: 3px auto;
}

#square {
  width: 20px;
  height: 20px;
  background-color: rgb(0, 167, 111);
  float: left;
  /*margin-right: 20px;*/
}

#circle {
  width: 20px;
  height: 20px;
  background-color: rgb(24, 204, 208);
  border-radius: 10px;
  float: right;
}

.other-login {
  margin-top: 30px;
}

</style>
